import Vue from 'vue'
import Vuex from 'vuex'
import axios from "axios";

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    users:[],
    startIndex:0,
    endIndex:10,
    pageSize:10,
    page:1//记录当前页码
    // showUsers:[]
  },
  mutations: {
    INIT_USERS(state,items){
      state.users  = [...items];
    },
    CHANGE_PAGE_DATA(state,page){
      state.page = page;//4
      //确定开始下标
      //每页页码-1 乘以每页的条数
      state.startIndex = (page-1)*state.pageSize;

      //确定结束下标
      //每页页码乘以每页的条数
      state.endIndex  =  state.pageSize*page;
      //如果结束下标超出数组长度，则结束下标等于数组的长度 
      if(state.endIndex > state.users.length){
        state.endIndex = state.users.length;
      }
    }
  },
  getters:{
    showUsers:function(state) {
      var tempArray = [];
      for(let index=state.startIndex;index<state.endIndex;index++){
        tempArray.push(state.users[index])
      }
      return tempArray;
    }
  },
  actions: {
    GET_DATA_LIST(context){
      axios.get("http://localhost:8080/list.json").then((res)=>{
        console.log(res)
        context.commit("INIT_USERS",res.data.data.users)
      })
    }
  },
  modules: {
  }
})
